<template>
  <div>
    <div v-if="flag == 0">
      <div class="mlt">
        <el-button
          v-permissions="{ permission: ['add:StaffRole'] }"
          type="primary"
          @click="addRole"
        >
          添加角色
        </el-button>
      </div>
      <div class="mlt">
        <el-table :data="tableData" :empty-text="emptyText" style="width: 100%">
          <el-table-column label="角色" prop="role_name" />

          <!-- <el-table-column label="权限管理">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="PermissionSetting(scope.row)"
              >
                权限设置
              </el-button>
            </template>
          </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                v-permissions="{ permission: ['edit:StaffRole'] }"
                size="mini"
                type="primary"
                @click="updataDepartment(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-permissions="{ permission: ['delete:StaffRole'] }"
                size="mini"
                type="danger"
                @click="delDepartments(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog title="角色" :visible.sync="dialogVisible" width="60%">
        <el-form ref="form" label-width="80px" :model="form">
          <div v-if="dialogVisible">
            <Jurisdiction :datas="datas" @showMain="showMain" />
          </div>
        </el-form>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="SubmitClick">确 定</el-button>
        </span> -->
      </el-dialog>
    </div>
    <!-- <div v-if="flag == 1">
      <Jurisdiction :datas="datas" @showMain="showMain" />
    </div> -->
  </div>
</template>

<script>
  import { getRoleList, roleAdd, roleDel } from '@/api/roleManagement'
  import Jurisdiction from './components/jurisdiction.vue'
  export default {
    name: 'Reception',
    components: {
      Jurisdiction,
    },
    data() {
      return {
        emptyText: ' ',
        tableData: [],
        dialogVisible: false,
        //切换页面状态
        flag: 0,
        form: {
          role_name: '',
        },
        optionData: [],
        id: '',
        datas: {
          id: '',
        },
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        // this.SchedulingList()
        this.roleList()
      },
      // 获取角色
      roleList() {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        getRoleList().then((res) => {
          this.tableData = res.data
          loading.close()
          if (res.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      // 编辑角色
      updataDepartment(e) {
        this.datas.id = e.id
        // this.form.id = e.id
        // this.form.role_name = e.role_name
        this.dialogVisible = true
      },
      showMain(e) {
        this.flag = e
        this.dialogVisible = false
        this.init()
      },
      // 停用角色
      delDepartments(e) {
        this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            const id = e
            roleDel(id)
              .then(() => {
                this.init()
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                })
              })
              .catch(() => {})
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
      // 添加角色
      addRole() {
        this.datas.id = ''
        this.form = {
          role_name: '',
        }
        this.dialogVisible = true
      },
      // 权限设置
      PermissionSetting(e) {
        // this.flag = 1
        this.datas.id = e.id
        this.dialogVisible = true
        // this.id = e.id
      },

      // 新增角色提交按钮
      SubmitClick() {
        const jy = {
          role_name: '请输入角色名称',
        }
        if (Object.keys(this.form).length === 0) {
          this.$message.error('请填写信息')
          return
        } else {
          for (var key in this.form) {
            if (this.form[key] == '') {
              this.$message.error(jy[key])
              return
            }
          }
        }
        roleAdd(this.form)
          .then(() => {
            this.init()
            this.$message({
              message: '成功',
              type: 'success',
            })
            this.form = {}
          })
          .catch(() => {
            this.$message.error('失败')
          })
        this.dialogVisible = false
      },
    },
  }
</script>

<style></style>
